<template>
  <div class="userAnalysis">
    <el-tabs type="border-card">
      <el-tab-pane label="一级渠道增长"
        ><el-card shadow="hover" class="userStatisticsBox">
          <div class="searchBox">
            <div>
              <h3>渠道增长</h3>
              <span>{{ date }}</span>
            </div>

            <div>
              <!-- <el-cascader
                :options="options"
                placeholder="请选择渠道"
                :props="{ multiple: true, checkStrictly: true }"
                clearable
              ></el-cascader> -->
              <el-date-picker
                v-model="channelTimeVal"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="channelPickerOptions"
                value-format="yyyy-MM-dd"
                @change="focus"
              >
              </el-date-picker>
              <el-button
                class="btn"
                icon="el-icon-search"
                @click="chartChannelGrowthBtn"
                >查询搜索</el-button
              >
              <el-button
                class="btn"
                icon="el-icon-download"
                @click="exportExcel"
                >导出Excel</el-button
              >
            </div>
          </div>

          <el-table :data="tableData" v-loading="loading" style="width: 100%">
            <el-table-column prop="channel" label="渠道"> </el-table-column>
            <el-table-column prop="totalUserNums" label="用户总计">
            </el-table-column>
            <el-table-column prop="addUserNums" label="今日新增">
            </el-table-column>
            <!-- <el-table-column prop="userRate" label="占比"> </el-table-column> -->
            <el-table-column prop="weekHRate" label="周环比"> </el-table-column>
            <el-table-column prop="activeUserNums" label="活跃用户">
            </el-table-column>
            <el-table-column prop="payRate" label="男活跃用户付费率%">
            </el-table-column>
            <el-table-column prop="payUserNums" label="男用户">
            </el-table-column>
            <el-table-column prop="profitRate" label="女活跃用户获利率%">
            </el-table-column>
            <el-table-column prop="profitUserNums" label="女用户">
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="page"
            :limit.sync="pageSize"
            @pagination="getList"
          />

          <div class="searchBox">
            <div class="p">
              <p :class="{ active: index == 1 }" @click="activeStatusA()">
                新增
              </p>
              <!-- <p :class="{ active: index == 2 }" @click="activeStatusB()">总量</p> -->
              <p :class="{ active: index == 3 }" @click="activeStatusC()">
                付费率
              </p>
              <p :class="{ active: index == 4 }" @click="activeStatusD()">
                提现率
              </p>
            </div>

            <div>
              <el-date-picker
                v-model="channelLineChartVal"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="channelLineChartPickerOptions"
                value-format="yyyy-MM-dd"
                @change="focusB"
              >
              </el-date-picker>
              <el-button
                class="btn"
                icon="el-icon-search"
                @click="chartChannelAnalysisBtn"
                >查询搜索</el-button
              >
            </div>
          </div>
          <div id="myChart" :style="{ width: '100%', height: '500px' }"></div>

          <div class="searchBox">
            <div>
              <h3>性别统计</h3>
            </div>
            <div>
              <span style="color: #9d9fa8; margin-right: 10px">请选择渠道</span>
              <el-select v-model="sexVal" placeholder="请选择性别统计渠道">
                <el-option
                  v-for="item in sexOptions"
                  :key="item.en_name"
                  :label="item.cn_name"
                  :value="item.en_name"
                >
                </el-option>
              </el-select>
              <el-date-picker
                v-model="sexTimeVal"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="sexPickerOptions"
                value-format="yyyy-MM-dd"
                @change="focusC"
              >
              </el-date-picker>
              <el-button class="btn" icon="el-icon-search" @click="sexSearchBtn"
                >查询搜索</el-button
              >
            </div>
          </div>
          <div id="myChartA" :style="{ width: '100%', height: '500px' }"></div>

          <div class="onlineSearchBox">
            <!-- <el-select v-model="onlineVal" placeholder="请选择在线详情渠道">
            <el-option
              v-for="item in onlineOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
            <h4>渠道在线人数与在线时长表</h4>
            <div>
              <el-date-picker
                v-model="onLineTimeVal"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="onLinePickerOptions"
                value-format="yyyy-MM-dd"
                @change="focusD"
              >
              </el-date-picker>
              <el-button
                class="btn"
                icon="el-icon-search"
                @click="chartOnlinedetailsBtn"
                >查询搜索</el-button
              >
              <el-button
                class="btn"
                icon="el-icon-download"
                @click="exportExcelD"
                >导出Excel</el-button
              >
            </div>
          </div>

          <el-table
            :data="onLineTableData"
            v-loading="onLineLoading"
            border
            style="width: 100%"
            height="500px"
          >
            <el-table-column prop="date" label="时间"> </el-table-column>
            <el-table-column prop="newAdd" label="总和(S)">
              <template slot-scope="scope">
                <span>{{
                  scope.row.total_perNum + "(" + scope.row.total_time + "s)"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="苹果商店">
              <template slot-scope="scope">
                <span>{{
                  scope.row.app_store_perNum +
                  "(" +
                  scope.row.app_store_time +
                  "s)"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="百度">
              <template slot-scope="scope">
                <span>{{
                  scope.row.baidu_store_perNum +
                  "(" +
                  scope.row.baidu_store_time +
                  "s)"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="CPA分发">
              <template slot-scope="scope">
                <span>{{
                  scope.row.cpa_store_perNum +
                  "(" +
                  scope.row.cpa_store_time +
                  "s)"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="官方">
              <template slot-scope="scope">
                <span>{{
                  scope.row.guanfang_perNum +
                  "(" +
                  scope.row.guanfang_time +
                  "s)"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="华为">
              <template slot-scope="scope">
                <span>{{
                  scope.row.huawei_store_perNum +
                  "(" +
                  scope.row.huawei_store_time +
                  "s)"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="巨量">
              <template slot-scope="scope">
                <span>{{
                  scope.row.oceanengine_store_perNum +
                  "(" +
                  scope.row.oceanengine_store_time +
                  "s)"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="OPPO">
              <template slot-scope="scope">
                <span>{{
                  scope.row.oppo_store_perNum +
                  "(" +
                  scope.row.oppo_store_time +
                  "s)"
                }}</span>
              </template>
            </el-table-column>

            <el-table-column label="购买量">
              <template slot-scope="scope">
                <span>{{
                  scope.row.other_store_perNum +
                  "(" +
                  scope.row.other_store_time +
                  "s)"
                }}</span>
              </template>
            </el-table-column>

            <el-table-column label="360">
              <template slot-scope="scope">
                <span>{{
                  scope.row.store_360_perNum +
                  "(" +
                  scope.row.store_360_time +
                  "s)"
                }}</span>
              </template>
            </el-table-column>

            <el-table-column label="OPPO">
              <template slot-scope="scope">
                <span>{{
                  scope.row.oppo_store_perNum +
                  "(" +
                  scope.row.oppo_store_time +
                  "s)"
                }}</span>
              </template>
            </el-table-column>

            <el-table-column label="腾讯">
              <template slot-scope="scope">
                <span>{{
                  scope.row.tencent_store_perNum +
                  "(" +
                  scope.row.tencent_store_time +
                  "s)"
                }}</span>
              </template>
            </el-table-column>

            <el-table-column label="阿里">
              <template slot-scope="scope">
                <span>{{
                  scope.row.uc_store_perNum +
                  "(" +
                  scope.row.uc_store_time +
                  "s)"
                }}</span>
              </template>
            </el-table-column>

            <el-table-column label="VIVO">
              <template slot-scope="scope">
                <span>{{
                  scope.row.vivo_store_perNum +
                  "(" +
                  scope.row.vivo_store_time +
                  "s)"
                }}</span>
              </template>
            </el-table-column>

            <el-table-column label="小米">
              <template slot-scope="scope">
                <span>{{
                  scope.row.xiaomi_store_perNum +
                  "(" +
                  scope.row.xiaomi_store_time +
                  "s)"
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card></el-tab-pane
      >
      <!-- <el-tab-pane label="注册渠道增长">注册渠道增长</el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  chartChannelGrowth,
  chartChannelAnalysis,
  chartGenderAnalysis,
  channelList,
  chartOnlinedetails,
} from "@/api/DataManagement";

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      loading: true,
      onLineLoading: true,
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                },
                {
                  value: "button",
                  label: "Button 按钮",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                },
                {
                  value: "input",
                  label: "Input 输入框",
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器",
                },
                {
                  value: "select",
                  label: "Select 选择器",
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器",
                },
                {
                  value: "switch",
                  label: "Switch 开关",
                },
                {
                  value: "slider",
                  label: "Slider 滑块",
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器",
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器",
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器",
                },
                {
                  value: "upload",
                  label: "Upload 上传",
                },
                {
                  value: "rate",
                  label: "Rate 评分",
                },
                {
                  value: "form",
                  label: "Form 表单",
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格",
                },
                {
                  value: "tag",
                  label: "Tag 标签",
                },
                {
                  value: "progress",
                  label: "Progress 进度条",
                },
                {
                  value: "tree",
                  label: "Tree 树形控件",
                },
                {
                  value: "pagination",
                  label: "Pagination 分页",
                },
                {
                  value: "badge",
                  label: "Badge 标记",
                },
              ],
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告",
                },
                {
                  value: "loading",
                  label: "Loading 加载",
                },
                {
                  value: "message",
                  label: "Message 消息提示",
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框",
                },
                {
                  value: "notification",
                  label: "Notification 通知",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单",
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页",
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑",
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单",
                },
                {
                  value: "steps",
                  label: "Steps 步骤条",
                },
              ],
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框",
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示",
                },
                {
                  value: "popover",
                  label: "Popover 弹出框",
                },
                {
                  value: "card",
                  label: "Card 卡片",
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯",
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],
      index: 1,
      //渠道增长
      channelPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      channelTimeValStartDate: "",
      channelTimeValEndDate: "",
      channelTimeVal: "", //渠道增长时间
      //渠道增长折线图
      channelLineChartPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      channelLineChartValStartDate: "", //
      channelLineChartValEndDate: "", //
      channelLineChartVal: "", //渠道增长折线图时间
      //性别统计
      sexOptions: [],
      sexVal: "", //性别统计渠道下拉框
      sexPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      sexTimeValStartDate: "", //
      sexTimeValEndDate: "", //
      sexTimeVal: "", //性别统计时间
      tableData: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数

      onLinePickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      onLineTimeValStartDate: "",
      onLineTimeValEndDate: "",
      onLineTimeVal: "", //在线情况时间
      //在线情况
      onLineTableData: [],
    };
  },
  methods: {
    // 导出渠道增长
    exportExcel() {
      chartChannelGrowth({
        startTime: this.channelTimeValStartDate,
        endTime: this.channelTimeValEndDate,
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            const tHeader = [
              "渠道",
              "用户总计",
              "今日新增",
              "周环比",
              "活跃用户",
              "男活跃用户付费率%",
              "男用户",
              "女活跃用户获利率%",
              "女用户",
            ]; // 上面设置Excel的表格第一行的标题
            const filterVal = [
              "channel",
              "totalUserNums",
              "addUserNums",
              "weekHRate",
              "activeUserNums",
              "payRate",
              "payUserNums",
              "profitRate",
              "profitUserNums",
            ]; // 上面的index、nickName、name是tableData里对象的属性key值
            const list = res.data.list; //把要导出的数据tableData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "渠道增长"); //最后一个是表名字
          });
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    //渠道增长列表
    chartChannelGrowth() {
      this.loading = true;
      chartChannelGrowth({
        startTime: "",
        endTime: "",
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.date = res.data.date;
          this.loading = false;
        }
      });
    },
    //查询搜索
    chartChannelGrowthBtn() {
      this.loading = true;

      chartChannelGrowth({
        startTime: this.channelTimeValStartDate,
        endTime: this.channelTimeValEndDate,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.date = res.data.date;
          this.loading = false;
        }
      });
    },
    //折线统计图
    chartChannelAnalysis() {
      chartChannelAnalysis({
        startTime: "",
        endTime: "",
        type: "", //1.新增 2.总量 3.付费率 4.提现率
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          // 绘制图表
          myChart.setOption({
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: res.data.channel,
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "360",
                type: "line",
                // stack: "总量",
                data: res.data.list.store_360,
              },
              {
                name: "苹果商店",
                type: "line",
                // stack: "总量",
                data: res.data.list.app_store,
              },
              {
                name: "百度",
                type: "line",
                // stack: "总量",
                data: res.data.list.baidu_store,
              },
              {
                name: "CPA分发",
                type: "line",
                // stack: "总量",
                data: res.data.list.cpa_store,
              },
              {
                name: "官方",
                type: "line",
                // stack: "总量",
                data: res.data.list.guanfang,
              },
              {
                name: "华为",
                type: "line",
                // stack: "总量",
                data: res.data.list.huawei_store,
              },
              {
                name: "巨量",
                type: "line",
                // stack: "总量",
                data: res.data.list.oceanengine_store,
              },
              {
                name: "OPPO",
                type: "line",
                // stack: "总量",
                data: res.data.list.oppo_store,
              },
              {
                name: "购买量",
                type: "line",
                // stack: "总量",
                data: res.data.list.other_store,
              },
              {
                name: "腾讯",
                type: "line",
                // stack: "总量",
                data: res.data.list.tencent_store,
              },
              {
                name: "阿里",
                type: "line",
                // stack: "总量",
                data: res.data.list.uc_store,
              },
              {
                name: "VIVO",
                type: "line",
                // stack: "总量",
                data: res.data.list.vivo_store,
              },
              {
                name: "小米",
                type: "line",
                // stack: "总量",
                data: res.data.list.xiaomi_store,
              },
            ],
          });
          // // 基于准备好的dom，初始化echarts实例
          // let myChartA = this.$echarts.init(
          //   document.getElementById("myChartA")
          // );
          // // 绘制图表
          // myChartA.setOption({
          //   title: {
          //     text: "性别统计(总计)",
          //   },
          //   tooltip: {
          //     trigger: "axis",
          //     axisPointer: {
          //       type: "shadow",
          //     },
          //   },
          //   legend: {
          //     data: ["女", "男"],
          //   },
          //   grid: {
          //     left: "3%",
          //     right: "4%",
          //     bottom: "3%",
          //     containLabel: true,
          //   },
          //   xAxis: {
          //     type: "value",
          //     boundaryGap: [0, 0.01],
          //   },
          //   yAxis: {
          //     type: "category",
          //     data: res.data.channel,
          //   },
          //   series: [
          //     {
          //       name: "男",
          //       type: "bar",
          //       data: [18203, 23489, 29034, 104970, 131744, 630230,18203, 18203,23489, 29034, 104970, 131744, 630230],
          //     },
          //     {
          //       name: "女",
          //       type: "bar",
          //       data: [19325, 23438, 31000, 121594, 134141, 681807],
          //     },
          //   ],
          // });
        }
      });
    },
    //折线统计图查询
    chartChannelAnalysisBtn() {
      chartChannelAnalysis({
        startTime: this.channelLineChartValStartDate,
        endTime: this.channelLineChartValEndDate,
        type: this.index, //1.新增 2.总量 3.付费率 4.提现率
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          // 绘制图表
          myChart.setOption({
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: res.data.channel,
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "360",
                type: "line",
                // stack: "总量",
                data: res.data.list.store_360,
              },
              {
                name: "苹果商店",
                type: "line",
                // stack: "总量",
                data: res.data.list.app_store,
              },
              {
                name: "百度",
                type: "line",
                // stack: "总量",
                data: res.data.list.baidu_store,
              },
              {
                name: "CPA分发",
                type: "line",
                // stack: "总量",
                data: res.data.list.cpa_store,
              },
              {
                name: "官方",
                type: "line",
                // stack: "总量",
                data: res.data.list.guanfang,
              },
              {
                name: "华为",
                type: "line",
                // stack: "总量",
                data: res.data.list.huawei_store,
              },
              {
                name: "巨量",
                type: "line",
                // stack: "总量",
                data: res.data.list.oceanengine_store,
              },
              {
                name: "OPPO",
                type: "line",
                // stack: "总量",
                data: res.data.list.oppo_store,
              },
              {
                name: "购买量",
                type: "line",
                // stack: "总量",
                data: res.data.list.other_store,
              },
              {
                name: "腾讯",
                type: "line",
                // stack: "总量",
                data: res.data.list.tencent_store,
              },
              {
                name: "阿里",
                type: "line",
                // stack: "总量",
                data: res.data.list.uc_store,
              },
              {
                name: "VIVO",
                type: "line",
                // stack: "总量",
                data: res.data.list.vivo_store,
              },
              {
                name: "小米",
                type: "line",
                // stack: "总量",
                data: res.data.list.xiaomi_store,
              },
            ],
          });
        }
      });
    },
    activeStatusA() {
      this.index = 1;
      chartChannelAnalysis({
        startTime: this.channelLineChartValStartDate,
        endTime: this.channelLineChartValEndDate,
        type: this.index, //1.新增 2.总量 3.付费率 4.提现率
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          // 绘制图表
          myChart.setOption({
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: res.data.channel,
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "360",
                type: "line",
                // stack: "总量",
                data: res.data.list.store_360,
              },
              {
                name: "苹果商店",
                type: "line",
                // stack: "总量",
                data: res.data.list.app_store,
              },
              {
                name: "百度",
                type: "line",
                // stack: "总量",
                data: res.data.list.baidu_store,
              },
              {
                name: "CPA分发",
                type: "line",
                // stack: "总量",
                data: res.data.list.cpa_store,
              },
              {
                name: "官方",
                type: "line",
                // stack: "总量",
                data: res.data.list.guanfang,
              },
              {
                name: "华为",
                type: "line",
                // stack: "总量",
                data: res.data.list.huawei_store,
              },
              {
                name: "巨量",
                type: "line",
                // stack: "总量",
                data: res.data.list.oceanengine_store,
              },
              {
                name: "OPPO",
                type: "line",
                // stack: "总量",
                data: res.data.list.oppo_store,
              },
              {
                name: "购买量",
                type: "line",
                // stack: "总量",
                data: res.data.list.other_store,
              },
              {
                name: "腾讯",
                type: "line",
                // stack: "总量",
                data: res.data.list.tencent_store,
              },
              {
                name: "阿里",
                type: "line",
                // stack: "总量",
                data: res.data.list.uc_store,
              },
              {
                name: "VIVO",
                type: "line",
                // stack: "总量",
                data: res.data.list.vivo_store,
              },
              {
                name: "小米",
                type: "line",
                // stack: "总量",
                data: res.data.list.xiaomi_store,
              },
            ],
          });
        }
      });
    },
    //总量
    // activeStatusB() {
    //   this.index = 2;
    //   chartChannelAnalysis({
    //     startTime: this.channelLineChartValStartDate,
    //     endTime: this.channelLineChartValEndDate,
    //     type: this.index, //1.新增 2.总量 3.付费率 4.提现率
    //   }).then((res) => {
    //     if (res.code == 0) {
    //       // 基于准备好的dom，初始化echarts实例
    //       let myChart = this.$echarts.init(document.getElementById("myChart"));
    //       // 绘制图表
    //       myChart.setOption({
    //         title: {
    //           text: "",
    //         },
    //         tooltip: {
    //           trigger: "axis",
    //         },
    //         legend: {
    //           data: res.data.channel,
    //         },
    //         grid: {
    //           left: "3%",
    //           right: "4%",
    //           bottom: "3%",
    //           containLabel: true,
    //         },
    //         xAxis: {
    //           type: "category",
    //           boundaryGap: false,
    //           data: res.data.date,
    //         },
    //         yAxis: {
    //           type: "value",
    //         },
    //         series: [
    //          {
    //             name: "360_store",
    //             type: "line",
    //             // stack: "总量",
    //             data: res.data.list.store_360,
    //           },
    //           {
    //             name: "app_store",
    //             type: "line",
    //             // stack: "总量",
    //             data: res.data.list.app_store,
    //           },
    //           {
    //             name: "baidu_store",
    //             type: "line",
    //             // stack: "总量",
    //             data: res.data.list.baidu_store,
    //           },
    //           {
    //             name: "cpa_store",
    //             type: "line",
    //             // stack: "总量",
    //             data: res.data.list.cpa_store,
    //           },
    //           {
    //             name: "guanfang",
    //             type: "line",
    //             // stack: "总量",
    //             data: res.data.list.guanfang,
    //           },
    //           {
    //             name: "huawei_store",
    //             type: "line",
    //             // stack: "总量",
    //             data: res.data.list.huawei_store,
    //           },
    //           {
    //             name: "oceanengine_store",
    //             type: "line",
    //             // stack: "总量",
    //             data: res.data.list.oceanengine_store,
    //           },
    //           {
    //             name: "oppo_store",
    //             type: "line",
    //             // stack: "总量",
    //             data: res.data.list.oppo_store,
    //           },
    //           {
    //             name: "other_store",
    //             type: "line",
    //             // stack: "总量",
    //             data: res.data.list.other_store,
    //           },
    //           {
    //             name: "tencent_store",
    //             type: "line",
    //             // stack: "总量",
    //             data: res.data.list.tencent_store,
    //           },
    //           {
    //             name: "uc_store",
    //             type: "line",
    //             // stack: "总量",
    //             data: res.data.list.uc_store,
    //           },
    //           {
    //             name: "vivo_store",
    //             type: "line",
    //             // stack: "总量",
    //             data: res.data.list.vivo_store,
    //           },
    //           {
    //             name: "xiaomi_store",
    //             type: "line",
    //             // stack: "总量",
    //             data: res.data.list.xiaomi_store,
    //           },
    //         ],
    //       });
    //     }
    //   });
    // },
    activeStatusC() {
      this.index = 3;
      chartChannelAnalysis({
        startTime: this.channelLineChartValStartDate,
        endTime: this.channelLineChartValEndDate,
        type: this.index, //1.新增 2.总量 3.付费率 4.提现率
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          // 绘制图表
          myChart.setOption({
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: res.data.channel,
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "360",
                type: "line",
                // stack: "总量",
                data: res.data.list.store_360,
              },
              {
                name: "苹果商店",
                type: "line",
                // stack: "总量",
                data: res.data.list.app_store,
              },
              {
                name: "百度",
                type: "line",
                // stack: "总量",
                data: res.data.list.baidu_store,
              },
              {
                name: "CPA分发",
                type: "line",
                // stack: "总量",
                data: res.data.list.cpa_store,
              },
              {
                name: "官方",
                type: "line",
                // stack: "总量",
                data: res.data.list.guanfang,
              },
              {
                name: "华为",
                type: "line",
                // stack: "总量",
                data: res.data.list.huawei_store,
              },
              {
                name: "巨量",
                type: "line",
                // stack: "总量",
                data: res.data.list.oceanengine_store,
              },
              {
                name: "OPPO",
                type: "line",
                // stack: "总量",
                data: res.data.list.oppo_store,
              },
              {
                name: "购买量",
                type: "line",
                // stack: "总量",
                data: res.data.list.other_store,
              },
              {
                name: "腾讯",
                type: "line",
                // stack: "总量",
                data: res.data.list.tencent_store,
              },
              {
                name: "阿里",
                type: "line",
                // stack: "总量",
                data: res.data.list.uc_store,
              },
              {
                name: "VIVO",
                type: "line",
                // stack: "总量",
                data: res.data.list.vivo_store,
              },
              {
                name: "小米",
                type: "line",
                // stack: "总量",
                data: res.data.list.xiaomi_store,
              },
            ],
          });
        }
      });
    },
    activeStatusD() {
      this.index = 4;
      chartChannelAnalysis({
        startTime: this.channelLineChartValStartDate,
        endTime: this.channelLineChartValEndDate,
        type: this.index, //1.新增 2.总量 3.付费率 4.提现率
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById("myChart"));
          // 绘制图表
          myChart.setOption({
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: res.data.channel,
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "360",
                type: "line",
                // stack: "总量",
                data: res.data.list.store_360,
              },
              {
                name: "苹果商店",
                type: "line",
                // stack: "总量",
                data: res.data.list.app_store,
              },
              {
                name: "百度",
                type: "line",
                // stack: "总量",
                data: res.data.list.baidu_store,
              },
              {
                name: "CPA分发",
                type: "line",
                // stack: "总量",
                data: res.data.list.cpa_store,
              },
              {
                name: "官方",
                type: "line",
                // stack: "总量",
                data: res.data.list.guanfang,
              },
              {
                name: "华为",
                type: "line",
                // stack: "总量",
                data: res.data.list.huawei_store,
              },
              {
                name: "巨量",
                type: "line",
                // stack: "总量",
                data: res.data.list.oceanengine_store,
              },
              {
                name: "OPPO",
                type: "line",
                // stack: "总量",
                data: res.data.list.oppo_store,
              },
              {
                name: "购买量",
                type: "line",
                // stack: "总量",
                data: res.data.list.other_store,
              },
              {
                name: "腾讯",
                type: "line",
                // stack: "总量",
                data: res.data.list.tencent_store,
              },
              {
                name: "阿里",
                type: "line",
                // stack: "总量",
                data: res.data.list.uc_store,
              },
              {
                name: "VIVO",
                type: "line",
                // stack: "总量",
                data: res.data.list.vivo_store,
              },
              {
                name: "小米",
                type: "line",
                // stack: "总量",
                data: res.data.list.xiaomi_store,
              },
            ],
          });
        }
      });
    },
    //分页
    getList() {},
    //性别
    chartGenderAnalysis() {
      chartGenderAnalysis({
        startTime: "",
        endTime: "",
        channel: "",
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChartA = this.$echarts.init(
            document.getElementById("myChartA")
          );
          // 绘制图表
          myChartA.setOption({
            title: {
              text: `性别统计(${res.data.time})`,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["女", "男"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01],
            },
            yAxis: {
              type: "category",
              data: res.data.channel,
            },
            series: [
              {
                name: "女",
                type: "bar",
                data: res.data.woman,
              },
              {
                name: "男",
                type: "bar",
                data: res.data.man,
              },
            ],
          });
        }
      });
    },
    //性别搜索
    sexSearchBtn() {
      chartGenderAnalysis({
        startTime: this.sexTimeValStartDate,
        endTime: this.sexTimeValEndDate,
        channel: this.sexVal,
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChartA = this.$echarts.init(
            document.getElementById("myChartA")
          );
          // 绘制图表
          myChartA.setOption({
            title: {
              text: `性别统计(${res.data.time})`,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["女", "男"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01],
            },
            yAxis: {
              type: "category",
              data: res.data.channel,
            },
            series: [
              {
                name: "女",
                type: "bar",
                data: res.data.woman,
              },
              {
                name: "男",
                type: "bar",
                data: res.data.man,
              },
            ],
          });
        }
      });
    },
    //渠道下拉框
    channelList() {
      channelList({}).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.sexOptions = res.data;
        }
      });
    },
    //时间渠道增长
    focus(time) {
      if (!this.channelTimeVal) {
        this.channelTimeVal = [];
      }
      this.channelTimeValStartDate = this.channelTimeVal[0];
      this.channelTimeValEndDate = this.channelTimeVal[1];
    },
    //时间渠道增长
    focusB(time) {
      if (!this.channelLineChartVal) {
        this.channelLineChartVal = [];
      }
      this.channelLineChartValStartDate = this.channelLineChartVal[0];
      this.channelLineChartValEndDate = this.channelLineChartVal[1];
    },
    //性别统计
    focusC(time) {
      if (!this.sexTimeVal) {
        this.sexTimeVal = [];
      }
      this.sexTimeValStartDate = this.sexTimeVal[0];
      this.sexTimeValEndDate = this.sexTimeVal[1];
    },
    //渠道在线人数表
    //在线情况
    chartOnlinedetails() {
      this.onLineLoading = true;
      chartOnlinedetails({
        startTime: "",
        endTime: "",
        // channel: "",
      }).then((res) => {
        if (res.code == 0) {
          this.onLineTableData = res.data.list;
          this.onLineLoading = false;
        }
      });
    },
    //搜索
    chartOnlinedetailsBtn() {
      this.onLineLoading = true;

      chartOnlinedetails({
        startTime: this.onLineTimeValStartDate,
        endTime: this.onLineTimeValEndDate,
        // channel: "",
      }).then((res) => {
        if (res.code == 0) {
          this.onLineTableData = res.data.list;
          this.onLineLoading = false;
        }
      });
    },
    // 导出在线情况
    exportExcelD() {
      chartOnlinedetails({
        startTime: this.onLineTimeValStartDate,
        endTime: this.onLineTimeValEndDate,
      }).then((res) => {
        if (res.code == 0) {
          if (res.data.list.length) {
            require.ensure([], () => {
              const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
              const tHeader = [
                "日期",
                "总和在线人数",
                "总和在线时长",
                "苹果商店渠道在线人数",
                "苹果商店渠道在线时长",
                "百度渠道在线人数",
                "百度渠道在线时长",
                "CPA分发渠道在线人数",
                "CPA分发渠道在线时长",
                "官方渠道在线人数",
                "官方渠道在线时长",
                "华为渠道在线人数",
                "华为渠道在线时长",
                "巨量渠道在线人数",
                "巨量渠道在线时长",
                "OPPO渠道在线人数",
                "OPPO渠道在线时长",
                "购买量渠道在线人数",
                "购买量渠道在线时长",
                "360渠道在线人数",
                "360渠道在线时长",
                "腾讯渠道在线人数",
                "腾讯渠道在线时长",
                "阿里渠道在线人数",
                "阿里渠道在线时长",
                "VIVO渠道在线人数",
                "VIVO渠道在线时长",
                "小米渠道在线人数",
                "小米渠道在线时长",
              ]; // 上面设置Excel的表格第一行的标题
              const filterVal = [
                "date",
                "total_perNum",
                "total_time",
                "app_store_perNum",
                "app_store_time",
                "baidu_store_perNum",
                "baidu_store_time",
                "cpa_store_perNum",
                "cpa_store_time",
                "guanfang_perNum",
                "guanfang_time",
                "huawei_store_perNum",
                "huawei_store_time",
                "oceanengine_store_perNum",
                "oceanengine_store_time",
                "oppo_store_perNum",
                "oppo_store_time",
                "other_store_perNum",
                "other_store_time",
                "store_360_perNum",
                "store_360_time",
                "tencent_store_perNum",
                "tencent_store_time",
                "uc_store_perNum",
                "uc_store_time",
                "vivo_store_perNum",
                "vivo_store_time",
                "xiaomi_store_perNum",
                "xiaomi_store_time",
              ]; // 上面的index、nickName、name是tableData里对象的属性key值
              const list = res.data.list; //把要导出的数据tableData存到list
              const data = this.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, "在线情况"); //最后一个是表名字
            });
          }
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    focusD(time) {
      if (!this.onLineTimeVal) {
        this.onLineTimeVal = [];
      }
      this.onLineTimeValStartDate = this.onLineTimeVal[0];
      this.onLineTimeValEndDate = this.onLineTimeVal[1];
    },
  },
  created() {
    this.chartChannelGrowth();
    this.chartChannelAnalysis();
    this.chartGenderAnalysis();
    this.channelList();
    this.chartOnlinedetails();
  },
};
</script>

<style lang="less" scoped>
.userAnalysis {
  margin: 30px;
  height: 100%;

  .userStatisticsBox {
    margin-bottom: 30px;
    #chartBox {
      display: flex;
      justify-content: space-between;
      #myChartA {
        width: 20%;
      }
      #myChartB {
        width: 80%;
      }
    }
    h3 {
      font-size: 22px;
      margin: 0px;
    }
    .todaySpan {
      margin-top: 10px;
      display: inline-block;
    }
    .userStatisticsItem {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      .one {
        width: 300px;
        height: 150px;
        h4 {
          margin: 0px;
          font-size: 26px;
          margin-bottom: 10px;
        }
        .p {
          margin: 20px 0px;
          font-size: 24px;
        }
        p {
          margin: 0px;
        }
        div {
          display: flex;
          justify-content: space-between;
        }
      }
    }
    .onlineSearchBox {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .el-input__inner,
      .el-range-editor.el-input__inner,
      .el-date-editor .el-range-input {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .searchBox {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      h3 {
        margin-bottom: 10px;
      }
      .el-input__inner,
      .el-range-editor.el-input__inner,
      .el-date-editor .el-range-input {
        margin-left: 10px;
      }
      .p2 {
        display: flex;
        p {
          width: 70px;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
      }
      .p {
        display: flex;
        p {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
      }
      .active {
        background-color: #0079fe;
        color: #fff;
        border-radius: 10px;
      }
      .el-button {
        margin-left: 20px;
      }
    }
    #myChart {
      margin-bottom: 30px;
    }
    .el-button {
      margin-left: 20px;
    }
    .el-table {
      margin-bottom: 30px;
      margin-top: 30px;
    }
  }
}
</style>